<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/common.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <!-- 先引入ajax  在引入 接口.js -->
    <script src="../js/interface.js"></script>
    <style>
        .right {
            color: green;
            font-size: 12px;
        }

        .error {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>
            <label for="user">用户名:</label>
            <input id="user" type="text">
            <span id="user_tips"></span>
        </p>
        <p>
            <label for="pwd">密&emsp;码:</label>
            <input id="pwd" type="password">
            <span id="pwd_tips"></span>
        </p>
        <p>
            <label for="phone">手机号:</label>
            <input id="phone" type="text">
            <span id="phone_tips"></span>
        </p>
        <p>
            <label for="email">邮&emsp;箱:</label>
            <input id="email" type="text">
            <span id="email_tips"></span>
        </p>
        <p>
            <label for="code">验证码:</label>
            <input id="code" type="text">
            <span id="randCode">abcd</span>
            <span id="code_tips"></span>
        </p>
        <p>
            <button id="btn" disabled>注册</button>
        </p>
    </div>
</body>
<script>


    // 1. 获取元素
    var userInp = document.getElementById("user");
    var userTips = document.getElementById("user_tips");

    var pwdInp = document.getElementById("pwd");
    var pwdTips = document.getElementById("pwd_tips");

    var phoneInp = document.getElementById("phone");
    var phoneTips = document.getElementById("phone_tips");

    var emailInp = document.getElementById("email");
    var emailTips = document.getElementById("email_tips");

    var codeInp = document.getElementById("code");
    var codeTips = document.getElementById("code_tips");

    var randCodeSpan = document.getElementById("randCode");

    var btn = document.getElementById("btn");

    console.log(userInp, userTips, btn);

    var userFlag = false;
    var pwdFlag = false;
    var phoneFlag = false;
    var emailFlag = false;
    var codeFlag = false;

    // 页面加载时 随机生成验证码 => 放到span中
    randCodeSpan.innerText = createCode();
    randCodeSpan.onclick = function () {
        this.innerText = createCode();
    }
    // 用户名
    // 由数字 字母 下划线 组成 6-12位  且不能以数字开头

    userInp.onblur = async function () {
        userFlag = false;
        var user = userInp.value.trim();
        userInp.value = user;

        var reg = /^[a-zA-Z_]\w{5,11}$/;
        if (reg.test(user)) {
            // isExistUser(user) 返回pending状态的Promise实例
            // isExistUser({ user }).then(function (result) {
            //     var { status, detail } = result;
            //     if (status) {
            //         userTips.textContent = "√";
            //         userTips.className = "right";
            //         userFlag = true;
            //         // isDisabled();
            //     } else {
            //         userTips.textContent = detail;
            //         userTips.className = "error";
            //     }
            // }).catch(err => {
            //     // throw err;
            //     console.log(err);
            //     userFlag = false;
            // }).finally(function () {
            //     isDisabled();
            // })

            var result = await isExistUser({ user });
            var { status, detail } = result;
            if (status) {
                userTips.textContent = "√";
                userTips.className = "right";
                userFlag = true;
                // isDisabled();
            } else {
                userTips.textContent = detail;
                userTips.className = "error";
            }
            isDisabled();


        } else {
            userTips.textContent = "用户名由数字,字母,下划线组成 6-12位 且不能以数字开头";
            userTips.className = "error";
        }

    }


    pwdInp.onblur = function () {
        pwdFlag = false;
        var pwd = pwdInp.value.trim();

        var reg = /^\w{6,12}$/;
        if (reg.test(pwd)) {

            pwdTips.className = "right";
            pwdFlag = true;


            // 密码强度判断
            var numFlag = false;
            var smallFlag = false;
            var bigFlag = false;
            var speFlag = false;

            var numReg = /[0-9]/;
            var smallReg = /[a-z]/;
            var bigReg = /[A-Z]/;
            var speReg = /[_]/;

            numFlag = numReg.test(pwd) ? true : false
            smallFlag = smallReg.test(pwd) ? true : false
            bigFlag = bigReg.test(pwd) ? true : false
            speFlag = speReg.test(pwd) ? true : false

            var sum = numFlag + smallFlag + bigFlag + speFlag;
            pwdTips.textContent = "密码强度:" + sum;

        } else {
            pwdTips.textContent = "用户名由数字,字母,下划线组成 6-12位";
            pwdTips.className = "error";
        }
        isDisabled();
    }

    phoneInp.onblur = function () {
        phoneFlag = false;
        var phone = phoneInp.value.trim();

        var reg = /^1[3-9]\d{9}$/;
        if (reg.test(phone)) {
            // phoneTips.textContent = "√";
            // phoneTips.className = "right";
            // phoneFlag = true;

            // var xhr = new XMLHttpRequest();

            // xhr.open("get", "../php/isExistPhone.php?phone=" + phone, true);

            // xhr.send();

            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         console.log(xhr.responseText);
            //         var result = JSON.parse(xhr.responseText);
            //         var { status, detail } = result;
            //         if (status) {
            //             phoneTips.textContent = "√";
            //             phoneTips.className = "right";
            //             phoneFlag = true;

            //             isDisabled();
            //         } else {
            //             phoneTips.textContent = detail;
            //             phoneTips.className = "error";
            //         }

            //     }
            // }

            $.ajax({
                // type:"get",
                url: "../php/isExistPhone.php",
                data: { phone },
                dataType: "json",
                success(result) {
                    var { status, detail } = result;
                    if (status) {
                        phoneTips.textContent = "√";
                        phoneTips.className = "right";
                        phoneFlag = true;

                        isDisabled();
                    } else {
                        phoneTips.textContent = detail;
                        phoneTips.className = "error";
                    }
                }
            })

        } else {
            phoneTips.textContent = "手机号格式有误";
            phoneTips.className = "error";
        }
        isDisabled();
    }


    emailInp.onblur = function () {
        emailFlag = false;
        var email = emailInp.value.trim();
        // 123123@qq.com
        var reg = /^\w+@\w+\.com$/;
        if (reg.test(email)) {
            // emailTips.textContent = "√";
            // emailTips.className = "right";
            // emailFlag = true;

            // var xhr = new XMLHttpRequest();

            // xhr.open("get", "../php/isExistEmail.php?email=" + email, true);

            // xhr.send();

            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         console.log(xhr.responseText);
            //         var result = JSON.parse(xhr.responseText);
            //         var { status, detail } = result;
            //         if (status) {
            //             emailTips.textContent = "√";
            //             emailTips.className = "right";
            //             emailFlag = true;

            //             isDisabled();
            //         } else {
            //             emailTips.textContent = detail;
            //             emailTips.className = "error";
            //         }

            //     }
            // }


            $.ajax({
                // type:"get",
                url: "../php/isExistEmail.php",
                data: { email },
                dataType: "json",
                success(result) {
                    var { status, detail } = result;
                    if (status) {
                        emailTips.textContent = "√";
                        emailTips.className = "right";
                        emailFlag = true;

                        isDisabled();
                    } else {
                        emailTips.textContent = detail;
                        emailTips.className = "error";
                    }
                }
            })
        } else {
            emailTips.textContent = "邮箱格式有误";
            emailTips.className = "error";
        }
        isDisabled();
    }

    codeInp.onblur = function () {
        codeFlag = false;
        var code = codeInp.value.trim();
        // 123123@qq.com
        if (code) {
            var reg = new RegExp("^" + randCodeSpan.textContent + "$", "i");
            if (reg.test(code)) {
                codeTips.textContent = "√";
                codeTips.className = "right";
                codeFlag = true;
            } else {
                codeTips.textContent = "×";
                codeTips.className = "error";
            }
        }
        isDisabled();
    }

    function isDisabled() {
        // && codeFlag
        if (userFlag && pwdFlag && phoneFlag && emailFlag) {
            btn.disabled = false;
            btn.onclick = registerHandler;
        } else {
            btn.disabled = true;
            btn.onclick = null;
        }
    }


    // 单用户注册 存在明显缺点: 只能保存一项目数据,后面会覆盖前面的(键名重复)

    // 多用户
    async function registerHandler() {
        // debugger;
        var user = userInp.value;
        var pwd = pwdInp.value;
        var phone = phoneInp.value;
        var email = emailInp.value;

        // $.ajax({
        //     type: "post",
        //     url: "../php/register.php",
        //     data: {
        //         user: user,
        //         pwd: pwd,
        //         phone,
        //         email,
        //     },
        //     dataType: "json",
        //     success: function (result) {
        //         var { status, detail } = result;
        //         if (status) {
        //             // alert(detail);
        //             location.href = "./login.html";
        //         } else {
        //             alert(detail);
        //         }
        //     }
        // })   

        // register({ user, pwd, phone, email }).then(({ status, detail }) => {
        //     if (status) {
        //         location.href = "./login.html";
        //     } else {
        //         alert(detail);
        //     }
        // }).catch(err => {
        //     throw err;
        // })

        var result = await register({ user, pwd, phone, email });
        var { status, detail } = result;
        if (status) {
            location.href = "./login.html";
        } else {
            alert(detail);
        }


    }






</script>

</html>